<template>
  <ul class="movies-list">
    <li v-for="f in free" :key="f.id">
      <router-link :to="{name:'MovieView',params:{id:f.id}}">
        <div class="hotImg">
          <img :src="f.images.small" alt="电影图片" width="100" height="150">
        </div>
        <div class="hotTxt">
          <p>{{f.title}}</p>
          <rating v-if="f.rating" :rating="f.rating"></rating>
        </div>
      </router-link>
    </li>
  </ul>
</template>

<script>
  import  Rating from '../../../public/Rating'
  export default {
    name: 'Free',
    components:{
      Rating
    },
    data(){
      return{
        free:[]
      }
    },
    created() {
      this.axios.get('/api/movie/top250?count=8')
        .then((res) => {
          let free = res.data.subjects
          this.free = free
          // console.log(coming)
        })
        .catch((err) => console.log(err))
    }
  }
</script>

<style lang="scss">
  .movies-list{
    height: 210px;
    overflow-x: auto;
    white-space: nowrap;
    text-align: center;
    li{
      display: inline-block;
      margin-right: 0.48rem;
    }
    .hotTxt{
      text-align: center;
      p{
        width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: .6rem;
        line-height: .94rem;
        color: #111;
      }
      .star-full {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url();
        background-size: cover;
      }

      .star-gray {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url();
        background-size: cover;
      }

      .star-half {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url();
        background-size: cover;
      }
      .rating0,.average {
        color: #aaa;
        line-height: .94rem;
        margin-top: .3rem;
        font-size: .72rem;
      }
    }
  }
</style>
